import React from 'react';
import { describe, it, expect, beforeEach, afterEach } from '@jest/globals';
import { render, screen, waitFor } from '@testing-library/react';
import { Provider } from 'react-redux';
import { setupServer } from 'msw/node';
import { rest } from 'msw';
import 'whatwg-fetch';

import { store } from '../../__data__/store';

import Page from '../todo';

const server = setupServer(
  rest.get('/api/todo-list', (req, res, ctx) => {
    return res(
      ctx.json({
        body: [
          {
            id: 123,
            title: 'Разобраться с отрисовкой',
          },
          {
            id: 132,
            title: 'Разобраться с пропсами',
          },
          {
            id: 12345,
            title: 'Разобраться с состоянием',
          },
        ],
      })
    );
  })
);

describe('Check DOM render', () => {
  beforeEach(() => {
    server.listen();
  });

  afterEach(() => {
    server.close();
  });

  it('simple test', async () => {
    const { container: node } = render(
      <Provider store={store}>
        <Page />
      </Provider>
    );

    await waitFor(() => screen.getByText(/Разобраться с состоянием/));

    expect(node).toMatchSnapshot();
  });
});
